<template>
  <div>
    <v-chart :option="option" theme="ovilia-green" autoresize :loading="loading" :loadingOptions="loadingOptions">
      <template #extra>
        <p v-if="seconds <= 0">
          <small>Loaded.</small>
        </p>
        <p v-else>
          <small>
            Data coming in
            <b>{{ seconds }}</b>
            second{{ seconds > 1 ? "s" : "" }}...
          </small>
        </p>
        <p>
          <button @click="refresh" :disabled="seconds > 0">Refresh</button>
        </p>
      </template>
    </v-chart>
  </div>
</template>
<script setup>
import { shallowRef } from "vue"
import { use } from "echarts/core"
import { CanvasRenderer, SVGRenderer } from "echarts/renderers"
import { BarChart } from "echarts/charts"
import { GridComponent, DatasetComponent, TooltipComponent, LegendComponent, MarkLineComponent } from "echarts/components"

// import VChart, { THEME_KEY } from 'vue-echarts'

import getData from "./data"

use([CanvasRenderer, SVGRenderer, BarChart, DatasetComponent, GridComponent, TooltipComponent, LegendComponent, MarkLineComponent])

const seconds = shallowRef(0)
const loading = shallowRef(false)
const loadingOptions = {
  text: "Loading…",
  color: "#4ea397",
  maskColor: "rgba(255, 255, 255, 0.4)",
}
const option = shallowRef(getData())
console.warn("##option", option.value)

onMounted(() => {
  option.value = getData()
})
</script>
